<template>
	<div>
		<div class="vs-search-box">
			<el-descriptions title="" border :column="2">
				<el-descriptions-item label="出库单号">{{ number }}</el-descriptions-item>
				<el-descriptions-item :label="beType == 1 ? '关联销售单号' : beType == 2 ? '关联领用单号' : beType == 3 ? '关联调拨单号' : '关联积分商品单号'">
					{{ detail.row.ticket_code }}
					<el-button type="primary" size="small" @click="goDetail">查看详情</el-button>
				</el-descriptions-item>
				<el-descriptions-item label="出库门店">
					{{ detail.row.fromStore ? detail.row.fromStore.title : detail.row.store ? detail.row.store.title : '' }}
				</el-descriptions-item>
				<el-descriptions-item label="出库类型">{{ beType | typeFilter }}</el-descriptions-item>
				<el-descriptions-item label="商品类型">{{ detail.row.goods_type | typeFilter1 }}</el-descriptions-item>
			</el-descriptions>
		</div>
		<div class="vs-table-box">
			<el-table :data="detail.info" header-row-class-name="has-gutter-table" style="margin-top: 20px" show-summary border ref="multipleTable">
				<el-table-column prop="id" width="50" label="序号" align="center"></el-table-column>
				<el-table-column prop="number" label="商品编码" align="center"></el-table-column>
				<el-table-column prop="title" label="商品系列" align="center"></el-table-column>
				<template v-if="detail.row.goods_type == 1 || detail.row.goods_type == 2">
					<el-table-column prop="roughcast" label="毛坯种类" align="center"> </el-table-column>
					<el-table-column prop="needle" label="递针类型" align="center"> </el-table-column>
					<el-table-column prop="size" label="尺寸" align="center"> </el-table-column>
					<el-table-column prop="sex" label="性别" align="center"> </el-table-column>
					<el-table-column prop="length" label="长度" align="center"> </el-table-column>
					<el-table-column prop="colour" label="颜色" align="center"> </el-table-column>
				</template>
				<template v-else>
					<el-table-column prop="sku_text" label="规格" align="center"></el-table-column>
					<el-table-column prop="unit" label="单位" align="center"></el-table-column>
				</template>
				<el-table-column prop="count" :label="beType == 3 ? '调拨数量' : '出库数量'" align="center"></el-table-column>
				<el-table-column prop="price" v-if="utils.getIsShopowner()" :label="beType == 3 ? '调拨金额' : '出库金额'" align="center">
					<template slot-scope="scope">
						{{ scope.row.price || '0.00' }}
					</template>
				</el-table-column>
			</el-table>
			<el-descriptions border :column="4" style="margin-top: 20px" title="操作信息">
				<el-descriptions-item label="出库日期">{{ create_time }}</el-descriptions-item>
			</el-descriptions>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				type: 1, //1详情  2新增
				beType: 1, //入库类型   1要货入库 2调拨入库  3积分商品入库
				detail: {
					row: {
						fromStore: {},
					},
					info: [],
				},
				ticket_code: '',
				number: '',
				create_time: '',
			};
		},
		created() {
			let { type, ticket_code, number, create_time } = this.$route.query;
			this.beType = type;
			this.ticket_code = ticket_code;
			this.number = number;
			this.create_time = create_time;
			this.$route.meta.title = '出库单详情';
			this.getDetail({ type, ticket_code });
		},
		filters: {
			typeFilter(val) {
				let arr = ['', '销售出库', '领用出库', '调拨出库', '积分商品出库'];
				return arr[val];
			},
			typeFilter1(val) {
				let arr = ['', '特殊商品', '普通商品', '洗护用品', '其他'];
				return arr[val];
			},
		},
		methods: {
			goDetail() {
				if (this.beType == 1) {
					this.utils.goUrl('/orderInfo?id=' + this.detail.row.id);
				} else if (this.beType == 2) {
					this.utils.goUrl(`/requisitionDetail?id=${this.detail.row.id}`);
				} else if (this.beType == 3) {
					this.utils.goUrl(`/goodsAllotInfo?id=${this.detail.row.id}`);
				} else {
					this.utils.goUrl('/orderInfos?id=' + this.detail.row.id);
				}
			},
			async getDetail(parms) {
				let { code, data } = await this.$Http.outstockInfo(parms);
				if (code) {
					this.detail = data;
				}
			},
		},
	};
</script>

<style leng="scss" scoped>
	.status {
		font-size: 18px;
		cursor: default;
	}
</style>
